<template>
    <view class="page-checklist content" :style="{ direction: $store.state.dir }">
        <uni-list :border="false" style="margin-top: 20px; background: transparent" v-if="list.length > 0">
            <uni-list-item
                v-for="item in list"
                :key="item.id"
                :title="item.createTime"
                :rightText="config[item.status]"
                :note="item.user.phone"
                showArrow
                link="navigateTo"
                :to="`/pages/detail/check/detail?id=${item.id}`"
            ></uni-list-item>
            <u-loadmore style="margin-top: 20px" v-if="hasMore" :status="loadStatus" />
        </uni-list>

        <view v-else class="empty-wrapper flex-layout-col flex-center">
            <image style="height: 200px" src="../../../static/list.png" mode="aspectFit"></image>
            <text style="font-size: 24px">{{ $t('nodata') }}</text>
            <text class="h3 gap-col-top2" style="text-align: center">This house has no history</text>
            <u-button @click="handleHomeButton" type="primary" style="width: 120px" class="gap-col-top2">Check Now</u-button>
        </view>
    </view>
</template>

<script>
import { orderList } from '../../../lib/service';
export default {
    data() {
        return {
            currentPage: 1,
            pageSize: 25,
            loadStatus: 'loading',
            hasMore: false,
            config: ['', 'Visited', 'To be paid', 'Paying', 'Paid'],
            list: []
        };
    },
    onLoad(options) {
        this.id = options.id;
        this.currentPage = 1;
    },
    onShow() {
        this.currentPage = 1;
        this.loadData();
    },
    onReachBottom() {
        if (this.hasMore) {
            this.currentPage = this.currentPage + 1;
            this.loadData();
        }
    },
    methods: {
        handleHomeButton() {
            uni.navigateTo({
                url: '/pages/detail/detail?id=' + this.id
            });
        },
        loadData() {
            if (!this.$store.state.user) {
                this.loadStatus = 'no-more';
                return false;
            }
            this.loadStatus = 'loading';
            uni.showLoading();
            orderList(this.id, {
                currentPage: this.currentPage,
                pageSize: this.pageSize
            })
                .then((res) => {
                    var more = res.data.hasMore;
                    uni.hideLoading();
                    this.hasMore = more;
                    this.loadStatus = more ? 'loadmore' : 'no-more';
                    this.list = res.data.records;
                })
                .catch((res) => {
                    uni.showToast({
                        title: 'System Error'
                    });
                });
        }
    }
};
</script>

<style lang="scss">
page {
    background-color: #f9fbff;
}

.empty-wrapper {
    height: 50vh;
}
</style>
